<template>
  <div class="list">
    <div class="tb-toolbar">
      <Form ref="formInline" :model="formInline" inline label-position="left" :label-width="60">
        <FormItem prop="username" label="用户名:">
          <Input type="text" v-model="formInline.username" placeholder="用户名"></Input>
        </FormItem>
        <FormItem prop="phone" label="手机号:">
          <Input type="text" v-model="formInline.phone" placeholder="手机号"></Input>
        </FormItem>
        <FormItem :label-width="0">
          <Button type="primary" @click="searchVip(index)">查询</Button>
        </FormItem>
      </Form>
    </div>
    <Table height="auto" :columns="columns" :data="data" row-key="id">
    </Table>
    <div class="page-cont">
      <Page :total="100" show-elevator show-total/>
    </div>
  </div>
</template>

<script>
  import {Message} from 'view-design'
  import expandRow from './table-expand.vue'
  export default {
    name: 'pays',
    components: { expandRow },
    data() {
      return {
        columns: [{ type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            })
          }},
          {title: '序号', type: 'index', align: 'center', width: 80},
          {title: '头像', key: 'avatar', align: 'center'},
          {title: '用户名', key: 'username', align: 'center'},
          {title: '手机号', key: 'mobile', align: 'center', width: 130},
          {title: '邮箱', key: 'email', align: 'center'}],
        data: [],
        formInline: {
          username: '',
          phone: '',
          status: '',
          type: ''
        }
      }
    },
    methods: {
      getList: function () {
        let that = this
        this.$api.getOfferList().then(res => {
          if (res.status === 200) {
            that.data = res.data.result
          } else {
            Message.error(res.data.message)
          }
        })
      }
    },
    mounted() {
      this.getList()
      this.$bus.$emit('getSubMenu', {openName: 'home', activeName: 'pays'})
    }
  }
</script>

<style scoped lang="scss">
  .list {
    background-color: #ffffff;
    .tb-toolbar{
      padding: 15px 5px 0px;
    }
    .tb_btn{
      font-size: 12px;
    }
    .page-cont{
      padding: 15px 10px;
      text-align: right;
      font-size: 12px;
    }
  }
</style>
